{include file="Public:header2"/}
  <style>
    /* 样式用于放大后显示图片 */
    .modal {
      display: none; /* 默认隐藏 */
      position: fixed;
      z-index: 9999;
      padding-top: 50px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0,0.9);
    }
    
    .modal-content {
      margin: auto;
      display: block;
      max-width: 80%;
      max-height: 80%;
    }
    
    .modal-content img {
      width: 100%;
      height: auto;
    }
  </style>
<body style="min-height: 100%;background-color: #fff">
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-table">
                <thead>
                    <tr>
                        <th style="text-align:center" colspan="9">订单信息</th>
                    </tr>
                </thead>
                <tbody>
                <tr>
                    <td>订单号</td>
                    <td>收件人</td>
                    <td>收货手机号</td>
                    <td colspan="2">收货地址</td>
                    <td>订单状态</td>
                    <td>下单时间</td>
                </tr>
                </tbody>
                <tbody>
                    <tr>
                        <td>{$info.send_num}</td>
                        <td>{$info.name}</td>
                        <td>{$info.mobile}</td>
                        <td  colspan="2">{$info.address}</td>
                        <td>
                            {if $info['status'] eq 1 /}
                            <button class="layui-btn layui-btn-danger layui-btn-radius layui-btn-sm">待发货</button>
                            {elseif $info['status'] eq 2 /}
                            <button class="layui-btn layui-btn-warm layui-btn-radius layui-btn-sm">待收货</button>
                            {elseif $info['status'] eq 3 /}
                            <button class="layui-btn layui-btn-success layui-btn-radius layui-btn-sm">已收货</button>
                            {/if}
                        </td>
                        <td>{$info.addtime|date="Y-m-d H:i:s"}</td>
                    </tr>
                </tbody>
            <thead>
                <tr>
                    <th colspan='9' style="height:15px;text-align:center;background:#fff">(共{$count}件)</th>
                </tr>
            <tr>
                <th colspan='2'>奖品信息</th>
                <th colspan='2'>奖品类型</th>
                <th colspan='2'>兑换价值</th>
                <th colspan='1'>数量</th>
            </tr>
            </thead>
            <tbody>
                {volist name="list" id="vo"}
                    <tr style="text-align:center">
                        <td colspan='2' style="text-align: left">
                            <div style="display: flex;">
                                <div><img src="{$vo['goodslist_imgurl']}" alt="" width="50px" height="50px" onclick="preview_image_list('{$vo[\'goodslist_imgurl\']}')"></div>
                                <div style="margin-left: 10px">
                                    <p style="color: #666;font-size: 10px">{$vo['goodslist_title']}</p>
                                    <p style="color: #ff5722c2;font-size: 10px">奖品价值：{$vo['goodslist_price']}</p>
                                </div>
                            </div>
                        </td>
                        <td colspan='2'>
                            <button class="layui-btn layui-btn-primary layui-btn-radius layui-btn-sm">{$vo['shang_title']}</button>
                        </td>
                        <td colspan='2'>{$vo['goodslist_money']}</td>
                        <td colspan='2'>x{$vo['num']}</td>
                    </tr>
                {/volist}
                {if $info['status'] eq 1 ||  $info['status']  eq 2}
                <tr colspan="9">
                    <td colspan='9' style="height:40px;text-align:center;">
                        <button type="button" onclick="deliver({$info.id})" class="layui-btn">编辑快递信息</button>
                    </td>
                </tr>
                {/if}
            </tbody>
            {if $info['status'] gt 1}
            <thead>
                <tr>
                    <td colspan='9' style="height:15px;text-align:center;background:#fff">物流信息</td>
                </tr>
            <tr>
                <th colspan='2'>快递名称</th>
                <th colspan='2'>快递单号</th>
                <th colspan='3'>发货时间</th>
            </tr>
            </thead>
            <tbody>
                <tr style="text-align:center">
                    <td colspan='2'>{$info['courier_name']}</td>
                    <td colspan='2'>{$info['courier_number']}</td>
                    <td colspan='5'>{$info.send_time|date="Y-m-d H:i:s"}</td>

                </tr>
            </tbody>
            {/if}
            </table>
        </div>
    </div>
</div>

<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="modalImg">
</div>

{include file="Public:footer"/}
<script type="text/javascript">
    layui.use(['table'], function(){

    });
    
    //表格图片预览
    var modal = document.getElementById("myModal");
    var modalImg = document.getElementById("modalImg");
    
    //表格图片预览
    function preview_image_list(img_src) {
        modalImg.src = img_src;
        var iHtml = "<img src='" + img_src + "' />";
        var windowW = $(window).width(); //获取当前窗口宽度
        var windowH = $(window).height(); //获取当前窗口高度
        var scale = 0.7; //缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
        var imgWidth, imgHeight;

        if (modalImg.naturalHeight > windowH *   scale) { //判断图片高度
            imgHeight = windowH * scale; //如大于窗口高度，图片高度进行缩放
            imgWidth = imgHeight / modalImg.naturalHeight * modalImg.naturalWidth; //等比例缩放宽度
            if (imgWidth > windowW * scale) { //如宽度扔大于窗口宽度
                imgWidth = windowW * scale; //再对宽度进行缩放
            }
        } else if (modalImg.naturalWidth > windowW * scale) { //如图片高度合适，判断图片宽度
            imgWidth = windowW * scale; //如大于窗口宽度，图片宽度进行缩放
            imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度
        } else { //如果图片真实高度和宽度都符合要求，高宽不变
            imgWidth = modalImg.naturalWidth;
            imgHeight = modalImg.naturalHeight;
        }
        layer.open({
            type: 1,
            title: false,
            // closeBtn: 0,
            shadeClose: true, //点击阴影关闭
            area: [imgWidth + 'px', imgHeight + 'px'], //宽高
            content: "<img src=" + img_src + " width=" + imgWidth + " height=" + imgHeight + " />"
        });
    }
    
    //发货
    function deliver(id){
        var url  = "{:url('/admin/send_order_deliver?id="+id+"')}";
        layer.open({
            type: 2,
            title: '发货',
            shadeClose: false,
            shade: 0.3,
            area: ['50%', '60%'],
            content: url,
        });
    }

</script>
</body>
</html>


